<template>
  <a-card :bordered="false" style="width: 100%;border-radius: 4px">
    <div style="width: 100%;padding: 16px;text-align: center">

      <a-form :model="form" :label-col="{span: 8}" :wrapper-col="{span: 16,style:{textAlign:'left'}}">
        <a-form-item label="商品类目：">
          <Cascader
            :value="form.prdClassArray"
            :options="options"
            :field-names="{label:'name',value:'name',children: 'children'}"
            placeholder="请选择商品类目"
            :style="{width:'400px',borderRadius:'4px'}"
            disabled/>
        </a-form-item>
        <a-form-item label="商品名称：">
          <a-input
            v-model="form.prdName"
            placeholder="请输入商品名称"
            :style="{width:'400px',borderRadius:'4px'}"
            disabled/>
        </a-form-item>
        <a-form-item label="商品子标题：">
          <a-input
            v-model="form.prdSubName"
            placeholder="商品子标题"
            :style="{width:'400px',borderRadius:'4px'}"
            disabled/>
        </a-form-item>
        <a-form-item label="商品封面：">
          <a-upload
            :action="url + `/file/`"
            list-type="picture-card"
            :file-list="prdImgCoverFileList">
          </a-upload>
        </a-form-item>
        <a-form-item label="商品类型">
          <a-select
            v-model="form.prdType"
            placeholder="`请选择商品类型`"
            :style="{width:'400px',borderRadius:'4px'}"
            disabled>
            <a-select-option value="01">
              普通商品
            </a-select-option>
            <a-select-option value="02">
              代销商品
            </a-select-option>
            <a-select-option value="03">
              虚拟商品
            </a-select-option>
            <a-select-option value="04">
              闪购商品
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="`是否预售`">
          <a-select
            v-model="form.isPresell"
            placeholder="请选择是否预售"
            :style="{width:'400px',borderRadius:'4px'}"
            disabled>
            <a-select-option value="01">
              非预售
            </a-select-option>
            <a-select-option value="02">
              预售
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="`频道展示`">
          <a-select
            v-model="form.isChannelShow"
            placeholder="请选择频道展示"
            :style="{width:'400px',borderRadius:'4px'}"
            disabled>
            <a-select-option value="01">
              是
            </a-select-option>
            <a-select-option value="02">
              否
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="商品描述：">
          <a-textarea
            v-model="form.prdDesc"
            placeholder="请输入商品描述"
            :style="{width:'400px',height:'150px',borderRadius:'4px'}"
            disabled/>
        </a-form-item>
        <a-form-item label="商品详细图：">
          <a-upload
            :action="url + `/file/`"
            list-type="picture-card"
            :file-list="prdImgFileList">
          </a-upload>
        </a-form-item>
        <a-form-item label="商品规格">
          <a-card style="width: 500px;margin-top: 5px" v-for="(item, index) in form.propList" :key="index">
            <div slot="title">{{ item.propName }}</div>
            <div>
              <a-checkbox v-for="(specItem,specIndex) in item.specList" :key="specIndex" checked="true">
                <a-tag>{{ specItem }} <a
                  style="margin-left:5px;border-left: 1px #dddddd solid">x</a></a-tag>
              </a-checkbox>
            </div>
          </a-card>
        </a-form-item>
        <a-form-item label="价格与库存">
          <a-row style="background-color: #dddddd" :gutter="10">
            <a-col :span="4" style="text-align: center" v-if="form.propList.length === 0">规格</a-col>
            <a-col
              :span="4"
              style="text-align: center"
              v-for="(item,index) in form.propList"
              v-if="item.specList.length > 0"
              :key="index">
              {{ item.propName }}
            </a-col>
            <a-col :span="4" style="text-align: center">*库存</a-col>
            <a-col :span="4" style="text-align: center">*单价</a-col>
            <a-col :span="4" style="text-align: center">sku编码</a-col>
          </a-row>
          <a-row :gutter="10" v-if="form.propList.length===0">
            <a-col :span="4" style="text-align: center">规格</a-col>
            <a-col :span="4" style="text-align: center">
              <a-input placeholder="库存"/>
            </a-col>
            <a-col :span="4" style="text-align: center">
              <a-input placeholder="单价"/>
            </a-col>
            <a-col :span="4" style="text-align: center">
              <a-input placeholder="sku"/>
            </a-col>
          </a-row>
          <a-row :gutter="10" v-if="form.propList.length>0" v-for="(item,index) in form.skuList" :key="index">
            <a-col :span="4" style="text-align: center" v-if="item.specOneName">{{ item.specOneName }}</a-col>
            <a-col :span="4" style="text-align: center" v-if="item.specTwoName">{{ item.specTwoName }}</a-col>
            <a-col :span="4" style="text-align: center">
              <a-input placeholder="库存" v-model="item.stock" disabled/>
            </a-col>
            <a-col :span="4" style="text-align: center">
              <a-input placeholder="单价" v-model="item.price" disabled/>
            </a-col>
            <a-col :span="4" style="text-align: center">
              <a-input placeholder="sku" v-model="item.sku" disabled/>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="物流模板：">
          <a-select
            v-model="form.expressTemplate"
            placeholder="请选择物流模板"
            :style="{width:'400px',borderRadius:'4px'}"
            disabled>
            <a-select-option value="1">
              全国包邮
            </a-select-option>
            <a-select-option value="2">
              货到付款
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-button
          :style="{marginTop:'16px',marginLeft:'8px'}"
          @click="$router.go(-1) ">返 回
        </a-button>
      </a-form>
    </div>
  </a-card>
</template>

<script>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import { Cascader } from 'ant-design-vue'
  import { detailPrd } from '@/api/prd'

  const options = [{
    'id': 1,
    'parentId': null,
    'name': '服装',
    'level': null,
    'productCount': null,
    'productUnit': null,
    'navStatus': null,
    'showStatus': null,
    'sort': null,
    'icon': null,
    'keywords': null,
    'description': null,
    'children': [{
      'id': 7,
      'parentId': null,
      'name': '外套',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 8,
      'parentId': null,
      'name': 'T恤',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 9,
      'parentId': null,
      'name': '休闲裤',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 10,
      'parentId': null,
      'name': '牛仔裤',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 11,
      'parentId': null,
      'name': '衬衫',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 29,
      'parentId': null,
      'name': '男鞋',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 53,
      'parentId': null,
      'name': '服装属性',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }]
  }, {
    'id': 2,
    'parentId': null,
    'name': '手机数码',
    'level': null,
    'productCount': null,
    'productUnit': null,
    'navStatus': null,
    'showStatus': null,
    'sort': null,
    'icon': null,
    'keywords': null,
    'description': null,
    'children': [{
      'id': 19,
      'parentId': null,
      'name': '手机通讯',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 30,
      'parentId': null,
      'name': '手机配件',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 31,
      'parentId': null,
      'name': '摄影摄像',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 32,
      'parentId': null,
      'name': '影音娱乐',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 33,
      'parentId': null,
      'name': '数码配件',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 34,
      'parentId': null,
      'name': '智能设备',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }]
  }, {
    'id': 3,
    'parentId': null,
    'name': '家用电器',
    'level': null,
    'productCount': null,
    'productUnit': null,
    'navStatus': null,
    'showStatus': null,
    'sort': null,
    'icon': null,
    'keywords': null,
    'description': null,
    'children': [{
      'id': 35,
      'parentId': null,
      'name': '电视',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 36,
      'parentId': null,
      'name': '空调',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 37,
      'parentId': null,
      'name': '洗衣机',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 38,
      'parentId': null,
      'name': '冰箱',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 39,
      'parentId': null,
      'name': '厨卫大电',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 40,
      'parentId': null,
      'name': '厨房小电',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 41,
      'parentId': null,
      'name': '生活电器',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 42,
      'parentId': null,
      'name': '个护健康',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }]
  }, {
    'id': 4,
    'parentId': null,
    'name': '家具家装',
    'level': null,
    'productCount': null,
    'productUnit': null,
    'navStatus': null,
    'showStatus': null,
    'sort': null,
    'icon': null,
    'keywords': null,
    'description': null,
    'children': [{
      'id': 43,
      'parentId': null,
      'name': '厨房卫浴',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 44,
      'parentId': null,
      'name': '灯饰照明',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 45,
      'parentId': null,
      'name': '五金工具',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 46,
      'parentId': null,
      'name': '卧室家具',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 47,
      'parentId': null,
      'name': '客厅家具',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }]
  }, {
    'id': 5,
    'parentId': null,
    'name': '汽车用品',
    'level': null,
    'productCount': null,
    'productUnit': null,
    'navStatus': null,
    'showStatus': null,
    'sort': null,
    'icon': null,
    'keywords': null,
    'description': null,
    'children': [{
      'id': 48,
      'parentId': null,
      'name': '全新整车',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 49,
      'parentId': null,
      'name': '车载电器',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 50,
      'parentId': null,
      'name': '维修保养',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }, {
      'id': 51,
      'parentId': null,
      'name': '汽车装饰',
      'level': null,
      'productCount': null,
      'productUnit': null,
      'navStatus': null,
      'showStatus': null,
      'sort': null,
      'icon': null,
      'keywords': null,
      'description': null
    }]
  }]
  export default {
    // 商品详细
    name: 'DetailProduct',
    components: { Cascader, PlusOutlined },
    data () {
      return {
        url: process.env.VUE_APP_API_BASE_URL,
        stepCurrent: 0,
        options,
        prdImgCoverFileList: [],
        prdImgFileList: [],
        addPropModalShow: false,
        propName: '',
        form: {
          prdClass: '',
          prdClassArray: [],
          prdName: '',
          prdSubName: '',
          prdType: '01',
          isPresell: '01',
          isChannelShow: '01',
          prdDesc: '',
          prdPrice: '0',
          prdCount: 0,
          expressTemplate: '01',
          prdImgCover: '',
          prdImg01: '',
          prdImg02: '',
          prdImg03: '',
          prdImg04: '',
          prdImg05: '',
          prdImg06: '',
          prdImg07: '',
          prdImg08: '',
          prdImg09: '',
          prdImg10: '',
          propList: [],
          skuList: []
        }
      }
    },
    methods: {

    },
    mounted () {
      const prdNo = this.$route.query.prdNo
      detailPrd({ prdNo: prdNo }).then(rsp => {
        this.form = rsp
        // data.propList.forEach(propItem => {
        //   this.form.propList.splice(0, 0, propItem)
        // })
        //
        // data.skuList.forEach(skuItem => {
        //   this.form.skuList.splice(0, 0, skuItem)
        // })
        this.form.prdClassArray = this.form.prdClass.split('/')
        this.prdImgCoverFileList.splice(0, 1, {
          uid: this.form.prdImgCover,
          name: '',
          status: 'done',
          url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImgCover
        })
        if (this.form.prdImg01) {
          this.prdImgFileList.push({
              uid: this.form.prdImg01,
              name: '',
              status: 'done',
              url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImg01
            })
          }
          if (this.form.prdImg02) {
            this.prdImgFileList.push({
              uid: this.form.prdImg02,
              name: '',
              status: 'done',
              url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImg02
            })
          }
          if (this.form.prdImg03) {
            this.prdImgFileList.push({
              uid: this.form.prdImg03,
              name: '',
              status: 'done',
              url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImg03
            })
          }
          if (this.form.prdImg04) {
            this.prdImgFileList.push({
              uid: this.form.prdImg04,
              name: '',
              status: 'done',
              url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImg04
            })
          }
          if (this.form.prdImg05) {
            this.prdImgFileList.push({
              uid: this.form.prdImg05,
              name: '',
              status: 'done',
              url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImg05
            })
          }
          if (this.form.prdImg06) {
            this.prdImgFileList.push({
              uid: this.form.prdImg06,
              name: '',
              status: 'done',
              url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImg06
            })
          }
          if (this.form.prdImg07) {
            this.prdImgFileList.push({
              uid: this.form.prdImg07,
              name: '',
              status: 'done',
              url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImg07
            })
          }
          if (this.form.prdImg08) {
            this.prdImgFileList.push({
              uid: this.form.prdImg08,
              name: '',
              status: 'done',
              url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImg08
            })
          }
          if (this.form.prdImg09) {
            this.prdImgFileList.push({
              uid: this.form.prdImg09,
              name: '',
              status: 'done',
              url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImg09
            })
          }
          if (this.form.prdImg10) {
            this.prdImgFileList.push({
              uid: this.form.prdImg10,
              name: '',
              status: 'done',
              url: process.env.VUE_APP_API_BASE_URL + '/file/' + this.form.prdImg10
            })
          }
      })
    }
  }
</script>

<style scoped>

</style>
